<template>
    <!-- 注册 -->
    <view class="com-page">
        <view class="login-com">
            <image class="home_icon_logo_nor" src="../../static/images/home_icon_logo_nor.png" mode=""></image>
            <image class="home_bg_dl_nor" src="../../static/login/home_bg_dl_nor.png" mode=""></image>
        </view>
        
        <view class="login-box">
            <view class="login-tips">您好！</view>
            <view class="login-tips">欢迎注册火云软件</view>
            <view class="input-box user-name">
                <image class="input-inco" src="../../static/images/home_icon_yongh_nor.png" mode=""></image>
                <input v-model="params.accountNum" type="text" value="" placeholder="请输入11位手机号，无需短信验证" placeholder-class="placeholder-class"/>
            </view>
            <view class="input-box">
                <image class="input-inco pwd" src="../../static/images/home_icon_mim_nor.png" mode=""></image>
                <input v-model="params.passWord" type="password" value="" placeholder="请输入密码" placeholder-class="placeholder-class"/>
            </view>
            <view class="input-box">
                <image class="input-inco pwd" src="../../static/images/home_icon_mim_nor.png" mode=""></image>
                <input v-model="params.passWord2" type="password" value="" placeholder="确认密码" placeholder-class="placeholder-class"/>
            </view>
            <view class="input-box">
                <image class="input-inco yzm" src="../../static/images/home_icon_yanzm_nor.png" mode=""></image>
                <input class="input-yzm" v-model="params.yzm" type="text" value="" placeholder="请输入验证码" placeholder-class="placeholder-class"/>
                <view class="yzm-box" @click="initYzm">
                    {{yzm}}
                    <!-- <image class="yzm-img" src="../../static/images/home_icon_mim_nor.png" mode=""></image> -->
                </view>
            </view>
            <view class="btns login" @click="customerRegistered">确认修改</view>
            <view class="agreement-box" @click.stop="agreeFun">
                <image v-if="isAgree" class="agreement-icon" src="../../static/defautl/agreement-1.png" mode=""></image>
                <image v-else class="agreement-icon" src="../../static/defautl/agreement.png" mode=""></image>
                <view>我已阅读并同意</view>
                <view class="agreement-font" @click.stop="viewAgreement">小程序相关协议</view>
            </view>
        </view>
        
    </view>
</template>

<script>
export default {
    data() {
        return {
            isAgree: false,
            params: {
                accountNum: "",
                passWord: "",
                passWord2: "",
                yzm: ''
            },
            yzm: ''
        }
    },
    onLoad() {
        this.initYzm()
    },
    methods: {
        initYzm() {
            let n = Math.floor(Math.random() * 1000000)
            this.yzm = n
        },
        goto(url){
            uni.navigateTo({
                url: url
            })
        },
        agreeFun() {
            this.isAgree = !this.isAgree
        },
        viewAgreement() {},
        // 三、注册
        customerRegistered(){
            if ( !this.params.accountNum ) return this.app.toast('请输入用户名')
            if ( !this.params.passWord ) return this.app.toast('请输入密码')
            if ( !this.params.passWord2 ) return this.app.toast('请输入密码')
            if ( this.params.passWord != this.params.passWord2 ) return this.app.toast('两次密码输入不一致')
            if ( !this.params.yzm ) return this.app.toast('请输入验证码')
            if ( this.params.yzm != this.yzm ) return this.app.toast('请输入正确的验证码')
            if ( !this.isAgree ) return this.app.toast('请同意协议')
            uni.showLoading();
            let opst = {
                accountNum: this.params.accountNum,
                passWord: this.params.passWord,
                recommendNetWork: "赣州总部",
                recommendNetWorkId: 1,
                tenantId: 1
            }
            this.app.apiAsync(`/dfApp/customerRegistered`, JSON.stringify(opst), "POST")
            .then( r => {
                r = r.data
                uni.hideLoading()
                if ( r.code == 200 ) {
                    this.app.toast('注册成功')
                    setTimeout( () => {
                        uni.navigateTo({
                            url: '/pages/login/login'
                        })
                    }, 800)
                } else {
                    this.app.toast(r.data.message)
                }
            })
        },
    }
}
</script>

<style scoped lang="less">
.com-page{
    position: relative;
}
.login-com{
    width: 750rpx;
    height: 660rpx;
    position: relative;
    
    .home_icon_logo_nor{
        position: absolute;
        top: 56rpx;
        z-index: 5;
        width: 180rpx;
        height: 180rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    .home_bg_dl_nor {
        width: 750rpx;
        height: 660rpx;
    }
}

.login-box{
    width: 680rpx;
    height: 800rpx;
    background: #fff;
    position: absolute;
    top: 290rpx;
    left: 35rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 60rpx 0;
    
    .login-tips {
        font-size: 36rpx;
        color: #555555;
    }
    
    .input-box{
        width: 520rpx;
        border-bottom: 1px solid #cccccc;
        display: flex;
        align-items: center;
        
        &.user-name{
            margin-top: 40rpx;
        }
        
        input{
            margin-left: 19rpx;
            width: 450rpx;
            height: 94rpx;
            font-size: 26rpx;
            
            &.input-yzm{
                flex: 1;
            }
        }
        .placeholder-class{
            color: #cccccc;
            font-size: 26rpx;
        }
        .input-inco{
            width: 31rpx;
            height: 34rpx;
            margin-left: 20rpx;
            
            &.pwd{
                width: 29rpx;
                height: 33rpx;
            }
            &.yzm{
                width: 28rpx;
                height: 32rpx;
            }
        }
        
        .yzm-box {
            width: 160rpx;
            height: 94rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .yzm-img{
                width: 160rpx;
                height: 94rpx;
            }
        }
    }
    
    
    .btns{
        width: 520rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        background: #f04545;
        text-align: center;
        color: #fff;
        font-size: 32rpx;
        border: 1rpx solid #ef2f2f;
        margin-top: 50rpx;
        
        &.login:active{
            background: #ef2f2f;
        }
    }
    
    .agreement-box{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #999999;
        .agreement-icon{
            width: 26rpx;
            height: 26rpx;
            margin-right: 4rpx;
        }
        .agreement-font{
            color: #f04545;
            text-decoration: underline;
        }
    }
}

</style>
